﻿
@{
    Layout = "_Layout";
}

<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>管理员列表 </h5>
                <div class="ibox-tools">
                    <a class="btn btn-sm btn-primary pull-right m-t-n-xs" @@click="open_model(-1)"><strong>添加新的管理员</strong></a>
                    
                </div>
            </div>
            <div class="ibox-content">

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>账号</th>
                            <th>电话</th>
                            <th>当前角色</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in page.list">
                            <td>{{item.id}}</td>
                            <td>{{item.userName}}</td>
                            <td>{{item.loginName}}</td>
                            <td>{{item.mobile}}</td>
                            <td>{{item.rule}}</td>
                            <td> <span class="label label-primary cursor-pointer m-r-sm" @@click="open_model(index)">修改</span><span class="label label-danger cursor-pointer" @@click="del(index)">删除</span></td>
                        </tr>
                    </tbody>
                </table>
                <page :pagesize="page.pageSize" :total="page.total" :page="page.page" @@getlist="getlist"></page>
            </div>
        </div>
    </div>
</div>
<div class="modelbox fade" v-bind:class="{in:show}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" v-on:click="close_model"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加管理员</h4>
                <!--<small class="font-bold">text</small>-->
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <div class="form-group"><label>账号：</label> <input type="text" class="form-control" v-model="user.loginName"></div>
                        <div class="form-group"><label>密码：</label> <input type="text" class="form-control" v-model="user.pass"></div>
                        <div class="form-group"><label>角色：</label> <select class="form-control" v-model="user.rid"><option v-for="item in rules" :value="item.id">{{item.name}}</option></select></div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group"><label>真实姓名：</label> <input type="text" class="form-control" v-model="user.userName"></div>
                        <div class="form-group"><label>手机号码：</label> <input type="text" class="form-control" v-model="user.mobile"></div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" v-on:click="close_model">关闭</button>
                <button type="button" class="btn btn-primary ladda-button" data-style="zoom-in" id="add" @@click="add">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade" v-bind:class="{in:show}"></div>
<script src="/js/page.js"></script>
<script>
    var vue = new Vue({
        el: "#bind",
        data: {
            page: {},
            rules: [],
            user: {
                id: 0,
                loginName: "",
                pass: "",
                rid: 0,
                userName: "",
                mobile:""
            },
            show: false,
            index:-1,

        },
        created: function () {
            var _this = this;
            get("/master/GetRules", { }, function (res) {
                _this.rules = res;
                if (_this.user.id == 0) {
                    _this.user.rid = res[0].id
                }
            })
            _this.getlist(1);
        },
        methods: {
            getlist: function (page) {
                var _this = this;
                get("/master/GetUsers", {page:page}, function (res) {
                    _this.page = res;
                })
            },
            open_model: function (index) { 
                this.show = true;
                this.index = index;
                if (index > -1) {
                    this.user = this.page.list[index];
                }
            },
            close_model: function () {
                this.show = false;
                this.index = -1;
            },
            add: function () {
                var _this = this;
                var bt = $("#add").ladda();
                bt.ladda("start");
                post("/master/AddMaster", _this.user, function (res) {
                    alertDo("操作成功", function () {
                        if (_this.user.id == 0) {
                            _this.page.list.unshift(res);
                        } else {
                            _this.page.list[_this.index] = res;
                        }
                        _this.close_model();
                    },"success")
                }, function () { 
                    bt.ladda("stop");
                });
            },
            del: function (index) { 
                var _this = this;
                var id = _this.page.list[index].id;
                confirm("确定删除吗?", function () { 
                    post("/master/del", { id: id }, function (res) {
                        alertDo("删除成功", function () {
                            _this.page.list.splice(index, 1);
                        }, "success")
                    });
                })
                
            }
        },
    })
</script>